import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 精灵模型对象 Sprite 与网格模型对象 Mesh 一样都是模型对象，都派生自基类 Object3D
 * 精灵模型对象与网格模型对象一样需要材质对象，但不用创建几何体对象，可以理解为其内部已经封装了一个 PlaneGeometry 对象，并始终平行于 Canvas 画布
 */
const txr = new THREE.TextureLoader().load('../../textures/sprite.png');
// 创建精灵材质对象
const spriteMat = new THREE.SpriteMaterial({
  color: 0xff00ff, // 精灵区域的颜色
  rotation: Math.PI / 4, // 旋转精良对象45度，弧度值
  map: txr // 设置精灵纹理贴图
});
// 创建精灵模型对象
const sprite = new THREE.Sprite(spriteMat);
scene.add(sprite);
// 控制精灵大小
sprite.scale.set(10, 10, 1); // 平面，只需设置 x y 两个分量
sprite.position.set(10, 10, 10);

const al = new THREE.AmbientLight(0xffffff);
scene.add(al);

const axesH = new THREE.AxesHelper(25);
scene.add(axesH);

const k = innerWidth / innerHeight,
      s = 75,
      camera = new THREE.PerspectiveCamera(s, k, 1, 10000);
camera.position.set(50, 50, 50);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);
(function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
})();